import { useState } from 'react'
import { Input, Select } from 'antd';
import { IconWidget } from '@inbiz/react'
import { RightOutlined } from '@ant-design/icons';
import { BackgroundImageInput, BackgroundSizeInput } from '@inbiz/react-settings-form'
import ColorInput from "../ColorInput"
import './index.less'

interface BackgroudType {
  backgroundColor?: string;
  backgroundImage?: string;
  backgroundPosition?: string;
  backgroundRepeat?: string;
  backgroundSize?: string
}
interface IBackgroundStyle {
  onChange: (a: BackgroudType) => void;
  value: BackgroudType
}
const BackgroundStyle = (props: IBackgroundStyle) => {
  const { onChange, value = {} } = props;
  const [showMore, $showMore] = useState<boolean>(false);
  return (
    <div className="inbiz-comp-background-style">
      <div className="line1">
        <RightOutlined onClick={() => $showMore((pre: boolean) => !pre)} style={{ transform: showMore ? 'rotate(90deg)' : 'rotate(0deg)' }} />
        <ColorInput
          value={value.backgroundColor}
          onChange={(color) => {
            onChange?.({
              ...value,
              backgroundColor: color
            })
          }}
          isGetPopupContainer={true}
        />
      </div>
      <div className={showMore ? 'backgroud-more backgroud-more-show' : 'backgroud-more'}>
        <div className='image-row'>
          <IconWidget infer='Image' size={16} />
          <BackgroundImageInput
            value={value.backgroundImage}
            onChange={(imgUrl) => {
              onChange?.({
                ...value,
                backgroundImage: imgUrl
              })
            }}
          />
        </div>
        <div className='image-row'>
          <div className='image-col'>
            <IconWidget infer='ImageSize' size={16} />
            <BackgroundSizeInput
              value={value.backgroundSize}
              onChange={(val) => {
                onChange?.({
                  ...value,
                  backgroundSize: val
                })
              }}
            />
          </div>
          <div className='image-col'>
            <IconWidget infer='Repeat' size={16} style={{ marginLeft: 5 }} />
            <Select
              value={value.backgroundRepeat}
              onChange={(val) => {
                onChange?.({
                  ...value,
                  backgroundRepeat: val
                })
              }}
              options={[
                {
                  label: 'No Repeat',
                  value: 'no-repeat',
                },
                {
                  label: 'Repeat',
                  value: 'repeat',
                },
                {
                  label: 'Repeat X',
                  value: 'repeat-x',
                },
                {
                  label: 'Repeat Y',
                  value: 'repeat-y',
                },
                {
                  label: 'Space',
                  value: 'space',
                },
                {
                  label: 'Round',
                  value: 'round',
                },
              ]}
              placeholder='Repeat'
            />
          </div>
        </div>
        <div className='image-row'>
          <IconWidget infer='Position' size={16} />
          <Input
            value={value.backgroundPosition}
            onChange={(e) => {
              onChange?.({
                ...value,
                backgroundPosition: e.target.value
              })
            }}
            placeholder='center center'
          />
        </div>
      </div>
    </div>
  )
}

export default BackgroundStyle